{% extends "base.html" %}

{% block title %}任务流 - 你的任务{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h2">你的任务</h1>
    <a href="{{ url_for('main.add_task') }}" class="btn btn-primary">
        <i class="fas fa-plus me-2"></i>添加新任务
    </a>
</div>

<div class="card mb-4">
    <div class="card-body">
        <form method="GET" class="row g-3 align-items-end">
            <div class="col-md-5">
                <label for="search" class="form-label">搜索</label>
                <div class="input-group">
                    <input type="text" name="search" id="search" class="form-control" placeholder="按标题或描述搜索..." value="{{ search_query }}">
                    <button class="btn btn-outline-secondary" type="submit">搜索</button>
                </div>
            </div>
            <div class="col-md-3">
                <label for="status" class="form-label">状态</label>
                <select name="status" id="status" class="form-select">
                    <option value="all" {% if status_filter == 'all' %}selected{% endif %}>所有状态</option>
                    <option value="todo" {% if status_filter == 'todo' %}selected{% endif %}>待办</option>
                    <option value="in_progress" {% if status_filter == 'in_progress' %}selected{% endif %}>进行中</option>
                    <option value="completed" {% if status_filter == 'completed' %}selected{% endif %}>已完成</option>
                </select>
            </div>
            <div class="col-md-3">
                <label for="priority" class="form-label">优先级</label>
                <select name="priority" id="priority" class="form-select">
                    <option value="all">所有优先级</option>
                    <option value="high" {% if priority_filter == 'high' %}selected{% endif %}>高</option>
                    <option value="medium" {% if priority_filter == 'medium' %}selected{% endif %}>中</option>
                    <option value="low" {% if priority_filter == 'low' %}selected{% endif %}>低</option>
                </select>
            </div>
            <div class="col-md-1 d-grid">
                <button type="submit" class="btn btn-secondary">筛选</button>
            </div>
        </form>
    </div>
</div>

{% if tasks %}
    <div class="row">
        {% for task in tasks %}
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card h-100 {% if task.status == 'completed' %}completed-task{% endif %}">
                <div class="card-body d-flex flex-column">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <h5 class="card-title mb-0 {{ 'text-decoration-line-through text-muted' if task.status == 'completed' }}" id="task-title-{{ task.id }}">{{ task.title }}</h5>
                        <span class="priority-badge priority-{{ task.priority }}">
                            {% if task.priority == 'high' %}高
                            {% elif task.priority == 'medium' %}中
                            {% elif task.priority == 'low' %}低
                            {% endif %}
                        </span>
                    </div>
                    <p class="card-text text-muted flex-grow-1">{{ task.description }}</p>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="status-badge status-{{ task.status }}" id="task-status-{{ task.id }}">
                            {% if task.status == 'todo' %}待办
                            {% elif task.status == 'in_progress' %}进行中
                            {% elif task.status == 'completed' %}已完成
                            {% endif %}
                        </span>
                        {% if task.due_date %}
                        <small class="text-muted"><i class="far fa-calendar-alt me-1"></i> {{ task.due_date.strftime('%#m月%#d日') }}</small>
                        {% endif %}
                    </div>
                    <div class="d-flex justify-content-end gap-2 mt-auto">
                        <button type="button" class="btn btn-sm btn-outline-success toggle-status-btn" data-task-id="{{ task.id }}">
                            <i class="fas fa-check"></i>
                        </button>
                        <a href="{{ url_for('main.edit_task', task_id=task.id) }}" class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-edit"></i>
                        </a>
                        <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteModal-{{ task.id }}">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Delete Confirmation Modal -->
        <div class="modal fade" id="deleteModal-{{ task.id }}" tabindex="-1" aria-labelledby="deleteModalLabel-{{ task.id }}" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteModalLabel-{{ task.id }}">确认删除</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        你确定要删除任务 "<strong>{{ task.title }}</strong>"吗？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <form action="{{ url_for('main.delete_task', task_id=task.id) }}" method="POST">
                            <button type="submit" class="btn btn-danger">删除</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
{% else %}
    <div class="empty-state">
        <i class="fas fa-check-circle"></i>
        <h4>全部完成！</h4>
        <p>你没有待处理的任务。准备好添加一个新任务了吗？</p>
        <a href="{{ url_for('main.add_task') }}" class="btn btn-primary mt-3">创建你的第一个任务</a>
    </div>
{% endif %}
{% endblock %}